<template>
  <PageContainer>
    <a-card :bordered="false" title="作业执行记录">
      <template #extra>
        <a-space size="middle">
          <a-switch
            v-model:checked="failRecodeSwitch"
            checked-children="仅显示失败记录"
            un-checked-children="仅显示失败记录"
            @change="failRecodeFilter"
          />
          <a-select v-model:value="selectedDayValue" style="width: 120px">
            <a-select-option :value="1">最近24小时</a-select-option>
            <a-select-option :value="7">最近七天</a-select-option>
            <a-select-option :value="30">最近一个月</a-select-option>
          </a-select>
          <a-select
            v-model:value="selectedJobName"
            show-search
            placeholder="选择一个作业进行查询"
            style="width: 400px"
            :options="selectJobOptions"
            :filter-option="filterJobOptions"
            :allow-clear="true"
          ></a-select>
          <a-button type="primary" @click="queryJobExecutionLogList()">查询</a-button>
        </a-space>
      </template>
      <a-spin size="large" :spinning="spinning">
        <a-table
          class="ant-table-striped"
          :data-source="dataSource"
          :columns="columns"
          :row-key="recode => recode.id"
          :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          bordered
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="jobExecutionStatusTagColor(record.endDateTime, record.exception)">
                {{ jobExecutionStatusTagDisplay(record.endDateTime, record.exception) }}
              </a-tag>
            </template>
          </template>
        </a-table>
      </a-spin>
    </a-card>
  </PageContainer>
</template>

<script setup lang="ts">
import { PageContainer as PageContainer } from '@ant-design-vue/pro-layout';
import * as jobApi from '@/api/job/job';
import { message } from 'ant-design-vue';

let failRecodeSwitch = ref(false);
let selectedDayValue = ref(1);
let selectedJobName = ref();
let selectJobOptions = ref([]);

onBeforeMount(() => {
  jobList();
  jobExecutionLogList();
});

//获取作业列表
function jobList() {
  jobApi.jobList().then(jsonResult => {
    if (!jsonResult) {
      return;
    }
    selectJobOptions.value = jsonResult.result.map((val: any) => {
      return {
        label: val.jobName,
        value: val.jobName,
      };
    });
  });
}

function filterJobOptions(input: string, option: any) {
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}

const columns = [
  {
    title: '作业名称',
    dataIndex: 'jobName',
  },
  {
    title: '分片id',
    dataIndex: 'shardingItem',
  },
  {
    title: '作业分片总数',
    dataIndex: 'shardingTotalCount',
  },
  {
    title: 'IP',
    dataIndex: 'ip',
  },
  {
    title: '状态',
    key: 'status',
  },
  {
    title: '开始时间',
    dataIndex: 'startDateTime',
  },
  {
    title: '结束时间',
    dataIndex: 'endDateTime',
  },
  {
    title: '异常信息',
    dataIndex: 'exception',
  },
];

let dataSource = ref([]);
let orginDataSource: any;
//获取作业执行日志列表
function queryJobExecutionLogList() {
  message
    .loading('查询中...')
    .then(() => {
      jobExecutionLogList();
    })
    .then(() => {
      message.success('查询成功！');
    });
}

//加载中
let spinning = ref(false);

function jobExecutionLogList() {
  spinning.value = true;
  jobApi.jobExecutionLogList({ jobName: selectedJobName.value, minusDays: selectedDayValue.value }).then(jsonResult => {
    spinning.value = false;
    if (!jsonResult) {
      return;
    }
    dataSource.value = jsonResult.result;
    orginDataSource = jsonResult.result;
  });
}

//状态
function jobExecutionStatusTagColor(endDateTime: string, exception: string) {
  let jobExecutionStatusTagColor = 'success';
  if (exception) {
    jobExecutionStatusTagColor = 'error';
  } else if (!endDateTime) {
    jobExecutionStatusTagColor = 'processing';
  }

  return jobExecutionStatusTagColor;
}

//状态
function jobExecutionStatusTagDisplay(endDateTime: string, exception: string) {
  let jobExecutionStatusTagDisplay = '成功';
  if (exception) {
    jobExecutionStatusTagDisplay = '失败';
  } else if (!endDateTime) {
    jobExecutionStatusTagDisplay = '执行中';
  }

  return jobExecutionStatusTagDisplay;
}

//仅显示失败的记录
function failRecodeFilter() {
  if (!failRecodeSwitch.value) {
    //所有
    dataSource.value = orginDataSource;
    return;
  }
  dataSource.value = orginDataSource.filter((item: { exception: string }) => {
    return item.exception;
  });
}
</script>

<style lang="less" scoped>
.paddingTop {
  margin-top: 30px;
}

.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>
